<template>
  <!-- 
  el-form: form表单 绑定 model 和 rules
  el-form-item: label 渲染label，prop 用来校验是否符合规则
  el: 实现了双向绑定输入框
 -->
  <div>
    <el-form :model="user" :rules="userRules" ref="userRef">
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item>
        <button @click="submit">提交表单</button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ElForm from './components/form/ElForm.vue'
import ElFormItem from './components/form/ElFormItem.vue'
import ElInput from './components/form/ElInput.vue'
export default {
  name: 'App',
  data() {
    return {
      user: {
        username: '',
        password: ''
      },
      userRules: {
        username: [
          {
            required: true,
            message: '请输入用户名'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码'
          }
        ]
      }
    }
  },
  components: {
    ElForm,
    ElFormItem,
    ElInput
  },
  methods: {
    submit() {
      this.$refs.userRef.validate((valid) => {
        if (valid) {
          alert('success')
        } else {
          alert('error')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
